import { ChangeEvent } from "react";
import { Todo } from ".";

interface TodoItemProps {
  todo: Todo;
  removeHandler: (todo: Todo) => void;
  updateHandler: (todo: Todo) => void;
}

function TodoItem(props: TodoItemProps) {
  const { todo, removeHandler, updateHandler } = props;

  function onChange(event: ChangeEvent<HTMLInputElement>) {
    updateHandler({ ...todo, checked: event.target.checked });
  }

  function clickHandler(type?: string) {
    if (type === "remove") {
      removeHandler(todo);
    } else {
      const flag = confirm(`确认${todo.done ? "恢复" : "完成"}待办事项？`);
      if (flag) {
        updateHandler({ ...todo, done: !todo.done });
      }
    }
  }

  return (
    <>
      <div className="todo-content-item">
        <div className="text">
          <input
            type="checkbox"
            defaultChecked={todo.checked}
            onChange={onChange}
          />
          <p>{todo.name}</p>
        </div>
        <div className="btn">
          <button onClick={() => clickHandler("remove")}>删除</button>
          <button onClick={() => clickHandler()}>处理</button>
        </div>
      </div>
    </>
  );
}

export default TodoItem;
